import React, { Component } from "react";
import Header from "../../components/header";
import "./index.css";
import { Input, Tabs } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { goodsCates, catesGoods } from "../../api/api";
const { Search } = Input;
const { TabPane } = Tabs;

export default class Index extends Component {
  constructor() {
    super();
    this.state = {
      tabPosition: "left",
      activeKey: "1",
      first_cates: [],
      second_cates: [],
    };
  }
  componentDidMount() {
    this.getfirst();
    // this.getsecondcate(1)
  }
  async getfirst() {
    let res = await goodsCates();
    let res1=await catesGoods(1)
    this.setState({
      first_cates: [...res.data.list],
      second_cates:[...res1.data.list]
    });
  }
  onSearch() {}
  onChange = async (fid) => {
    let res = await catesGoods(fid);
    this.setState({
      activeKey: fid,
      second_cates: [...res.data.list],
    });
    console.log(res);
  };
  render() {
    return (
      <main>
        <Header title="商品分类"></Header>
        <div className="h_search">
          <Search
            id="search"
            prefix={<SearchOutlined />}
            placeholder="按内容搜索"
            allowClear
            enterButton="搜索"
            size="large"
            onSearch={this.onSearch}
          />
        </div>
        <div>
          <Tabs
            tabPosition={this.state.tabPosition}
            activeKey={this.state.activeKey}
            onChange={this.onChange}
          >
            {this.state.first_cates.map((item) => {
              return (
                <TabPane tab={item.catename} key={String(item.id)}>
                  {this.state.second_cates.map((item) => {
                    return (
                      <div className="List_goods" key={item.id}>
                        <img
                          src={this.$url+item.img}
                          alt="暂时没有"
                        />
                        <div>
                          <p className="title">{item.goodsname}</p>
                          <p className="disc">{item.description}</p>
                          <div className="price">
                            <span>￥{item.price}</span>
                            <del>￥{item.market_price}</del>
                            <button>加入购物车</button>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </TabPane>
              );
            })}
          </Tabs>
        </div>
      </main>
    );
  }
}
